<template>
  <div class="tags-show">
    <span>{{ computedTag }}</span>
    <!-- <el-tag
      v-for="(tag, i) in value"
      :key="i"
      :closable="!onlyShow"
      type="primary"
      @close="handleClose(tag)"
    >{{ tag[props.response.name] }}</el-tag> -->
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    value: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => {}
    },
    onlyShow: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    computedTag() {
      return this.value.map(tag => {
        return tag[this.props.response.name]
      }).join("、");
    }
  },
  mounted() {},

  methods: {
    handleClose(tag) {
      if (this.readonly) return;
      const select = this.value;
      select.splice(select.indexOf(tag), 1);
      this.$emit("update", select);
      this.$emit("change", select);
    }
  }
};
</script>

<style lang="scss" scoped>
.tags-show {
  .el-tag {
    margin-right: 10px;
  }
}
</style>
